<template>
  <div>
    <!-- 页面主体结构 -->
    <el-container>
      <el-header class="header">宠物派后台管理系统</el-header>
      <el-container>
        <!-- 导航 -->
        <el-aside class="aside" width="200px">
          <el-menu
            router
            unique-opened
            background-color="#333333"
            text-color="#fff"
            active-text-color="#ddd"
            style="border: none"
          >
            <!-- 商家相关 -->
            <el-submenu index="business">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span slot="title">商家管理</span>
              </template>
              <el-menu-item index="/home/business-list">
                <template slot="title">
                  <i class="el-icon-folder-add"></i>
                  <span slot="title">商家列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/home/business-add">
                <template slot="title">
                  <i class="el-icon-document-copy"></i>
                  <span slot="title">新增商家</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <!-- 用户相关 -->
            <el-menu-item index="/home/user-list">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span slot="title">用户管理</span>
              </template>
            </el-menu-item>
            <!-- 订单相关 -->
            <el-submenu index="/home/order-list">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span slot="title">订单管理</span>
              </template>
              <el-menu-item index="/home/order-list">
                <template slot="title">
                  <i class="el-icon-s-claim"></i>
                  <span slot="title">全部订单</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <!-- 日记相关 -->
            <el-submenu index="/home/dairy-list">
              <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">日记管理</span>
              </template>
              <el-menu-item index="/home/dairy-list">
                <template slot="title">
                  <i class="el-icon-document-checked"></i>
                  <span slot="title">日记列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/home/dairy-add">
                <template slot="title">
                  <i class="el-icon-tickets"></i>
                  <span slot="title">新增日记</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <!-- 嵌套路由匹配二级路由 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.header {
  background-color: #333333;
  color: #ffffff;
  line-height: 60px;
  font-size: 1.5em;
}
.aside {
  background-color: #333333;
  color: #ffffff;
  height: calc(100vh - 60px);
}
.main {
  height: calc(100vh - 60px);
}
.el-menu-item.is-active {
  font-weight: bold;
}
</style>

